<template>
  <div class="exam-paper-view">
    <!-- 学生信息展示 -->
    <h2>查看试卷</h2>

    <!-- 分页查询 -->
    <el-pagination
      v-if="totalPages > 1"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="totalRecords"
      @current-change="handlePageChange"
    ></el-pagination>

    <!-- 显示答题记录 -->
    <div v-if="records.length">
      <div v-for="record in records" :key="record.id" class="exam-record">
        <el-divider></el-divider>
        <h3>题目 {{ record.questionId }}</h3>
        <div>
          <strong>题目内容：</strong> {{ record.content }}
          (<strong>题目分数：</strong> {{ record.fullscore }})
        </div>
        <div>
          <strong>学生答案：</strong> {{ record.answer }}
        </div>
        <div>
          <strong>学生得分：</strong> {{ record.score }}
        </div>
        <div>
          <strong>解析：</strong> {{ record.analysis }}
        </div>
      </div>
    </div>
    <div v-else>
      <p>没有答题记录</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElPagination } from 'element-plus'
import axios from 'axios'
import { useCookies } from 'vue3-cookies'

const { cookies } = useCookies()

// 页面相关参数
const pageSize = ref(10)  // 每页显示条数
const pageNum = ref(1)  // 当前页码
const totalPages = ref(0)  // 总页数
const totalRecords = ref(0)  // 总记录数
const records = ref([])  // 存储答题记录

// 获取学生和试卷ID
const route = useRoute()
const studentId = route.query.studentId || cookies.get('studentId')
const paperId = route.query.paperId || cookies.get('paperId')

// 获取答题记录
async function getAnswerRecords() {
  try {
    console.log(pageNum.value)
    const res = await axios.get('/api/answer/page', {
      params: {
        studentId,
        paperId,
        pageSize: pageSize.value,
        pageNum: pageNum.value,
      },
    })
    if (res.data.code === 200) {
      totalPages.value = res.data.data.pages
      totalRecords.value = res.data.data.total
      records.value = res.data.data.records

      // 查询题目的详细信息
      await fetchQuestionDetails()
    } else {
      ElMessage.error('获取答题记录失败')
    }
  } catch (err) {
    ElMessage.error('获取答题记录失败')
  }
}

// 获取题目详细信息
async function fetchQuestionDetails() {
  for (let record of records.value) {
    try {
      const res = await axios.get('/api/question/page', {
        params: { questionIds: record.questionId },
      })
      if (res.data.code === 200 && res.data.data.records.length) {
        const question = res.data.data.records[0]
        record.content = question.content
        record.analysis = question.analysis
        record.fullscore = question.score
      }
    } catch (err) {
      console.error(`获取题目ID ${record.questionId} 的详细信息失败`, err)
    }
  }
}

// 分页切换
function handlePageChange(page) {
  pageNum.value = page
  getAnswerRecords()
}

// 页面初始化
onMounted(() => {
  getAnswerRecords()
})
</script>

<style scoped>
.exam-paper-view {
  padding: 20px;
}

.exam-record {
    width: 70%;
    margin-left: 15%;
  background-color: #f9f9f9;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
}

.exam-record h3 {
  margin: 0 0 10px 0;
}

.exam-record strong {
  color: #2c3e50;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
